<template>
    <div class="login">
        <div class="login_img_logo">
            <img src="../assets/logo.jpg" alt="">
        </div>
        <div class="login_f">
            <div class="login_f_line">
                <div class="login_f_t"><img src="../assets/phone.png" alt=""></div>
                <div class="login_f_input1">
                    <input type="number" v-model="mobile" title="手机号" placeholder="手机号">
                </div>
            </div>
            <div class="login_f_line login_f_code">
                <div class="login_f_t"><img src="../assets/message.png" alt=""></div>
                <div class="login_f_input2"><input type="number" v-model="verify" placeholder="验证码"></div>
                <div>
                   <button class="login_codebtn" @click="getvcode()" v-show="show">获取验证码</button>
                   <span v-show="!show" class="login_count">{{count}} s</span>
                </div>
            </div>
            <div class="login_f_line">
                <div class="login_f_t"><img src="../assets/merchant.png" alt="" class="merchantName"></div>
                <div class="login_f_input1">
                    <input type="text" v-model="name" placeholder="商户名">
                </div>
            </div>
            <button class="login_submit" @click="submit()">注册</button>
            <div class="login_action">注册即表示您已阅读并同意<a class="login_font_r"  @click="goto('agree')">《商户入驻协议》</a>未注册手机号登录
后将自动注册为CAR PLUS会员。</div>
        </div>
    </div>
</template>
<script>
import { Field,Button  } from 'mint-ui';
import cookie from '../store/modules/cookie'
export default {
    components: {
        Field,
        Button
    },
    data(){
        return{
            mobile:'',
            verify:'',
            name:'',
            show:true,
            count: '',
            timer: null,
            timeconut:10,
            uid:0
        }
    },
    methods:{
        goto(path){
            this.$router.push({
              path:'/'+path
            })
        },
        inverted (){
            let that = this
            if (!that.timer) {
                that.count = that.timeconut;
                that.show = false;
                that.timer = setInterval(() => {
                if (that.count > 0 && that.count <= that.timeconut) {
                    that.count--;
                } else {
                    that.show = true;
                    clearInterval(that.timer);
                    that.timer = null;
                }
                }, 1000)
            }
        },
        getvcode(){
            let that = this
            if(!that.mobile){
                this.$messagebox({
                   title:'提示',
                   message: "手机号不能为空"
               })
            }else if(!(/^1[345789]\d{9}$/.test(that.mobile))){
               this.$messagebox({
                   title:'提示',
                   message: "手机格式不正确"
               })
            }else{
                that.$http.get('merchant/index/sendSms',{mobile:that.mobile}).then((res)=>{
                    if(res.code == 0){
                        that.inverted()
                    }else{
                        that.$messagebox({
                            title: '提示',
                            message: res.msg
                        })
                    }
                }).catch((res)=>{
                    console.log(res)
                })
            }
        },
        submit(){
            let that = this
            that.uid  = cookie.getCookie('uid')
            let data = {
                mobile:  that.mobile,
                vcode:that.verify,
                mername:that.name,
                uid:that.uid,
            }
            if(!(/^1[345789]\d{9}$/.test(that.mobile))){
                that.$messagebox({
                    title: '提示',
                    message: "请输入正确的手机号"
                })
            }else if(!(/^\d{4}$/.test(that.verify))){
                that.$messagebox({
                    title: '提示',
                    message: "请输入正确的验证码"
                })
            }else{
                that.$http.get('merchant/index/register',data).then((res)=>{
                    if(res.code == 0){
                        that.$router.push({
                            path:'/mindex'
                        })
                    }else{
                        that.$messagebox({
                            title: '提示',
                            message: res.msg
                        })
                    }
                }).catch((res)=>{
                    console.log(res)
                })
            }

        },
    }
}
</script>
<style lang="">
    .login input{width: 98%;border: none;}
    .login_img_logo{
        width: 522px;
        height: 203px;
        margin: 276px auto 161px;
    }
    .login_img_logo img{width: 100%;height: 100%;}
    .login_f_line{
        height: 161px;
        line-height: 161px;
        margin: 0 63px;
        border-bottom: 1px solid #cccccc;
    }
    .login_f_t{
        float: left;
        width: 18%;
        color: #9A9A9A;
    }
    .login_f_t img{
      height:48px;
      width: auto;
    }
    .merchantName{height: 54px !important;}
    .login_f_input1{
        float: left;
        width: 80%;
    }
    .login_f_input2{
        float: left;
        width: 50%;
    }
    .login_f_input1 input,.login_f_input2 input{line-height: 120px;font-size: 48px;}
    .login_codebtn{
        border: 1px solid #020202;
        color: #000;
        background-color: #fff;
        height: 77px;
        line-height: 77px;
    }
    .login_submit{
        background: #22CFB6;
        color: #231815;
        font-size: 48px;
        width: 90%;
        height: 135px;
        border: none;
        margin: 139px 5% 50px;
    }
    .login_action{
        color: #9A9A9A;
        width: 90%;
        margin: 0px 5%;
        text-align: left;
        font-size: 33px;
        line-height: 45px;
    }
    .login_font_r{color: #FF0D3C;}
</style>